<template>
  <div>
    <svg id="chart" width="120" height="480">

    </svg>
  </div>
</template>

<script>
import * as d3 from "d3";
class Data {
  constructor(r, id) {
    this.r = r
    this.id = id
  }
}
export default {
  name: "s3_selection",
  metaInfo: {
    title: "选择器",
  },
  data: function() {
    return {
      data: []
    }
  },
  created() {
    this.data = Array.from([32, 57, 112, 293], (r, i) => new Data(r, i))
  },
  mounted() {
    let svg = d3.select("#chart")

    svg.selectAll("circle")
        .data(this.data, d => d.id)
        .enter()  // 选取没有创建元素的数据
        .append("circle") // 创建元素
        .attr("cx", 60)
        .attr("cy", d => d.id * 100 + 30)
        .attr("r", d => Math.sqrt(d.r))

    svg.selectAll("circle")
        .data([this.data[1], this.data[2]], d => d.id)
        .exit()   // 选取没选中这些数据的元素
        .remove()  // 移除元素

    svg.selectAll("circle")
        .data([this.data[2]], d => d.id)  // 默认选择已有的元素 (update)
        .attr("cx", 60)
        .attr("cy", d => d.id * 100 + 30)
        .attr("r", d => Math.sqrt(d.r) * 2)

  }
}
</script>

<style scoped>

</style>
